<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="$store.state.count++">count++</button>
    <el-row class="home">
      <el-col :span="16">
        <el-carousel
          :interval="4000"
          type="card"
          height="300px"
          indicator-position="none"
          v-loading="isLoading"
        >
          <el-carousel-item v-for="(item, index) in banners" :key="index">
            <img :src="item.image" :alt="item.title" />
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <el-col :span="8">
        <h1 class="grid-content bg-purple-light">right</h1>

        <Button>Default</Button>
        <Button type="primary">Primary</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="text">Text</Button>
        <br />
        <br />
        <Button type="info">Info</Button>
        <Button type="success">Success</Button>
        <Button type="warning">Warning</Button>
        <Button type="error">Error</Button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6" v-for="(item, index) in list" :key="index">
        <el-card class="card" :body-style="{ padding: '20px' }">
          <div class="img-wrapper">
            <img :src="item.images[0]" class="image" />
          </div>
          <div style="padding: 14px">
            <div class="title">{{ item.title }}</div>
            <div class="bottom clearfix">
              <time class="time">{{ item.createdAt }}</time>
              <router-link :to="{ name: 'Article', params: { id: item._id } }">
                <el-button type="text" class="button">详情</el-button>
              </router-link>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "Home",
  data() {
    return {
      isLoading: true,
    };
  },
  computed: {
    ...mapState(["banners", "list", "count"]),
  },
  methods: {
    ...mapActions(["getBanners", "getList"]),
  },
  async created() {
    // Promise.all()
    // Promise.any()
    // Promise.race()
    const loading = this.$loading();
    try {
      await this.getBanners();
      await this.getList();
    } catch (e) {
      this.$message.error("网络错误，请刷新重试");
    } finally {
      loading.close();
      // this.isLoading = false;
    }
    /*
    this.isLoading = true;
    this.getBanners()
      .catch(() => {
        this.$message.error("网络错误，请刷新重试");
      })
      .finally(() => {
        this.isLoading = false;
      });*/
    // this.$store.dispatch('getBanners')
    // this.$loading()
    /*const loading = this.$loading();
    this.getList().finally(() => {
      loading.close();
    });*/
  },
};
</script>

<style lang="stylus">
.el-carousel__item img {
  width 100%
  height 100%
  object-fit cover
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.card {
  .img-wrapper {
    background url(../assets/logo.png) no-repeat center / 100px
    height 200px
    overflow hidden
  }

  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    height 100%
    object-fit cover
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .title {
    height 50px
    line-height 25px

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}
</style>
